import React, { useEffect, useState } from 'react';
import './orderList.scss';
//  引用阿里图标 需下载：npm install --save @ant-design/icons
import { createFromIconfontCN } from '@ant-design/icons';
import { Link } from 'react-router-dom';
import * as api from 'api/index'

function OrderList() {
  let [orderList, setOrderList] = useState([])

  const getList = () => {
    api.orderLists().then((res) => {
      setOrderList(res.result)
      console.log(res.result);
    })

  }
  useEffect(getList, [])
  const fcTime = (cellValue) => {
    let date = new Date(cellValue);
    let Y = date.getFullYear();
    let M = date.getMonth() + 1;
    let D = date.getDate();
    M = M < 10 ? '0' + M : M;
    D = D < 10 ? '0' + D : D;
    return `${Y}/${M}/${D}`
  }

  const back = () => {
    history.back();
  }

  const IconFont = createFromIconfontCN({
    scriptUrl: '//at.alicdn.com/t/c/font_3609988_egtmx6wbohv.js',
    // scriptUrl的值是从阿里图标库中复制过来的，每次添加了图标都要重新复制新的链接
  });

  return (<div className='orderList'>

    {/* <!-- 顶部 --> */}
    <div className='top-box'>
      <div className="top ">
        <div className="top-left">
          <span onClick={back} className='top-left-icon'>
            <IconFont className=' font-png' type="icon-fanhuijiantou" />
            <span className="top-left-word ml-5">返回</span>
          </span>

        </div>

        <div className="top-certen">
          <p className="top-certen-word">订单列表</p>
        </div>
        <div className="top-right">
          <Link to='/my' className='top-right-icon'>
            <IconFont type="icon-wode" />
          </Link>
        </div>

      </div>
    </div>
    {/* <!-- 列表 --> */}
    {orderList.map((item) => {
      if (item.house)
        return (
          <div className="order-list" key={item.id}>

            <div className="order-list-1">
              <p className="order-list-1-1">{item.house && item.house.name}</p>
              <p className="order-list-1-2">{item.orderStatus === '00' ? '已支付' : '待支付'}</p>
            </div>



            <div className="order-list-2 ">

              <img alt="img" src={item.house && item.house.imageUrl}></img>

              <div className="order-list-2-right">

                <span className="order-list-2-right-1 ">
                  <span className="order-list-2-right-1-word">入住日期:</span>
                  <span className="order-list-2-right-1-num">{item.startDate}</span>
                </span>

                <span className="order-list-2-right-2 ">
                  <span className="order-list-2-right-2-word">退房日期:</span>
                  <span className="order-list-2-right-2-num">{item.endDate}</span>
                </span>

                <span className="order-list-2-right-3 ">
                  <span className="order-list-2-right-3-word">订单日期:</span>
                  <span className="order-list-2-right-3-num">{fcTime(item.updateTime)}</span>
                </span>

                <span className="order-list-2-right-4 ">
                  <span className="order-list-2-right-4-word">订单总价:</span>
                  <span className="order-list-2-right-4-num">￥{item && item.totalMoney}</span>
                </span>

              </div>
            </div>
            <div className="order-list-3 ">
              <Link to='/order/detail' className="order-list-3-1">订单详情</Link>
              <p className="order-list-3-2">联系客服</p>
              <p className="order-list-3-3">取消订单</p>
              <p className="order-list-3-4">立即支付</p>
            </div>
          </div>
        )
    })}

  </div>);
}

export default OrderList;